<template>
	<view class="content">
		<view class="refund-order">
			<view class="left-image">
				<image mode="aspectFill" :src="noImage"></image>
			</view>
			<view class="right-text">
				<view class="text-lists">
					<view>套餐类型：</view>
					<view class="colorBlue">{{detail.orderDetail.setMealName}}</view>
				</view>
				<view class="text-lists">
					<view>订单编号：</view>
					<view>{{detail.orderDetail.orderId}}</view>
				</view>
				<view class="text-lists">
					<view>订单时间：</view>
					<view>{{detail.orderDetail.createTime}}</view>
				</view>
			</view>
		</view>
		<view class="refund-forms">
			<view class="title-forms">
				<text>{{detail.orderDetail.snowFieldName}}</text>
				<uni-icons type="forward"></uni-icons>
			</view>
			<view class="serves">
				<view v-for="(item,index) in detail.orderDetailServices" :key="index">
					<view>{{item.servicesName }}</view>
					<view>￥ {{item.servicesPrice }}</view>
				</view>
			</view>
			<view class="refund-datas">
				<form @submit="formSubmit" @reset="formReset">
					<view class="uni-form-item uni-column">
						<view class="title">退款理由：</view>
						<view>
							<input class="uni-input" name="input" v-model="form.problemDesc" placeholder="请输入退款理由" />
						</view>
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">退款描述：</view>
						<view>
							<textarea v-model="form.reason" placeholder="请输入退款描述"></textarea>
						</view>
					</view>
				</form>
				<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup1" @click="onClick"
					@buttonClick="buttonClick" style="margin-top: 20px;" />
			</view>
			<button @click="submitRefund" class="submitBtn">提交申请</button>
		</view>
	</view>
</template>

<script>
	import {
		getOrderDetail,
		refundPayment
	} from '@/api/order.js'
	import imageConfig from '@/utils/images.js'
	export default {
		data() {
			return {
				imageUrl:imageConfig.uploadImageUrl,
				id: 0,
				detail: {},
				noImage: require(imageConfig.uploadImageUrl+'noPic.jpg'),
				form: {
					afterSaleImage: "",
					applyRefundPrice: 0,
					auditRemark: "",
					flowPrice: 0,
					memberId: "",
					memberName: "",
					orderId: "",
					outTradeNo: "",
					payOrderNo: "",
					problemDesc: "",
					reason: ""
				},
				options: [],
				customButtonGroup1: [{
					text: '申请退款',
					backgroundColor: 'linear-gradient(90deg, #708DA9, #73A7DA)',
					color: '#fff'
				}]
			}
		},
		onLoad: function(option) {
			this.id = option.id
			this.getData()
		},
		methods: {
			formSubmit() {},
			formReset() {},
			onClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			},
			buttonClick(e) {
				console.log(e)
				// this.options[2].info++
			},
			getData() {
				getOrderDetail(this.id).then(res => {
					console.log(res)
					this.detail = res.data
					this.form = {
						afterSaleImage: "", // 辅助理由图片
						applyRefundPrice: res.data.order.total,
						auditRemark: "",
						flowPrice: 0,
						memberId: res.data.orderDetail.memberId,
						memberName: res.data.orderDetail.memberName,
						orderId: res.data.orderDetail.orderId,
						outTradeNo: res.data.order.outTradeNo,
						payOrderNo: "", // 支出凭证，暂时不知道会从哪个字段出来，但是应该是接口给的
						problemDesc: "", // 问题描述，文本框
						reason: "" // 理由，暂时未知有哪些，需要设置
					}
					console.log(this.form,'this.form')
				})
			},
			submitRefund() {
				let data = {
					applyRefundPrice: this.form.applyRefundPrice, // 申请退款金额
					memberId: this.form.memberId, // 用户ID
					memberName: this.form.memberName, // 用户名称
					orderId: this.form.orderId, // 订单id
					outTradeNo: this.form.outTradeNo, // 商户订单号
					payOrderNo: '', // 订单支付方式返回的交易号
					problemDesc: this.form.problemDesc, // 问题描述
					reason: this.form.reason // 申请原因
					
				}
				if(this.form.problemDesc === '') {
					uni.showToast({
						title:"请填写退款理由",
						icon:"none"
					})
					return
				}
				if(this.form.reason === '') {
					uni.showToast({
						title:"请填写退款描述",
						icon:"none"
					})
					return
				}
				refundPayment(data).then(res => {
					console.log(res)
					if(res.code === 200) {
						// this.form.problemDesc && this.form.reason === ''
						uni.switchTab({
							url:"/pages/order/index"
						})
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		overflow: hidden;
		background: #f2f6f9;
		min-height: 100vh;

		.refund-order {
			width: 100%;
			background-color: #ffffff;
			// padding: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0rpx -6rpx 13rpx 0rpx rgba(0, 0, 0, 0.8);

			.left-image {
				flex: 1;
				margin: 30rpx;

				image {
					width: 180rpx;
					height: 180rpx;

				}
			}

			.right-text {
				flex: 2.5;
				margin-right: 30rpx;

				.text-lists {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #aaaaaa;
					font-size: 22rpx;
					line-height: 50rpx;

					.colorBlue {
						font-size: 32rpx;
						color: #A7CCEF;
					}
				}
			}
		}

		.refund-forms {
			width: 100%;
			background-color: #ffffff;
			box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(0, 0, 0, 0.2);
			margin-top: 30rpx;

			.title-forms {
				width: 100%;
				height: 60rpx;
				line-height: 60rpx;
				text-indent: 1.2em;
				font-size: 22rpx;
				color: #666666;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				border-bottom: 1rpx #dddddd solid;
				padding-top: 20rpx;

				/deep/.uni-icons {
					font-size: 26rpx !important;
					color: #666666 !important;
				}
			}

			.serves {
				margin: 0 30rpx;

				>view {
					display: flex;
					justify-content: space-between;
					align-items: center;

					view {
						font-size: 22rpx;
						color: #666666;
						padding: 15rpx 0;

						&:nth-child(2) {
							color: #A7CCEF;
						}
					}
				}
			}

			.refund-datas {
				padding: 15rpx 30rpx;

				.title {
					font-size: 22rpx;
					color: #666666;
				}

				input {
					border: 1px #dddddd solid;
					font-size: 22rpx;
					border-radius: 5rpx;
					line-height: 50rpx;
					padding: 15rpx;
					margin: 20rpx 0;
					width: 660rpx;
				}

				textarea {
					border: 1px #dddddd solid;
					font-size: 22rpx;
					border-radius: 5rpx;
					line-height: 50rpx;
					padding: 15rpx;
					margin: 20rpx 0;
					width: 660rpx;
				}
			}
		
			.submitBtn {
				width: 362rpx;
				background: #A7CCEF;
				border-radius: 36rpx;
				font-size: 33rpx;
				color: #FFFFFF;
			}
		}
	}
</style>